<template>
  <div class="wrapper">
    <ul class="list" v-if="dataList.length > 0">
      <li v-for="(item,index) in dataList" :key="index">
        <p>{{item.changeTitle}}<br><span>{{item.changeTimeStr}}</span></p>
        <em>{{item.changeAmount}}元</em>
      </li>
    </ul>
    <div class="no" v-if="dataList.length == 0">
      <section>
        <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/nodata.png">
        <p>暂无明细</p>
      </section>
    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {

    data() {
      return {
        dataList: [],
        unlimitedCardId: ''
      }
    },

    mounted() {

    },
    onLoad(options) {
      this.unlimitedCardId = options.unlimitedCardId
      this.dataList = []
      this.getDataList()
    },

    methods: {

      getDataList() {
        let params = {
          unlimitedCardId: this.unlimitedCardId,
          pageNum: 1,
          pageSize: 200
        }
        Service.getCardDetail(params)
          .then((res) => {
            if (res.code == 200) {
              if (res.data.logs) {
                this.dataList = res.data.logs
              }
            }
          })
      },
    }
  }
</script>

<style scoped>

  .wrapper {
    min-height: 100vh;
    background: #fff;
  }
  .list{
    width: 100%;
    padding: .2rem .3rem;
    box-sizing: border-box;
  }
  li {
    overflow: hidden;
    border-bottom: 1px solid rgba(221, 221, 221, 0.5);
    padding: .2rem 0;
  }

  li p {
    font-size: .3rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: .42rem;
    float: left;
  }

  li span {
    font-size: .24rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: .33rem;
  }

  li em {
    float: right;
    font-size: .32rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 57, 57, 1);
    line-height: .45rem;
    font-style: normal;
    margin-top: .25rem;
  }

  .no {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .no p {
    font-size: .3rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .no img {
    width: .8rem;
    height: .8rem;
  }

</style>
